<!DOCTYPE html>
<html lang="zh">
	<head>
		<!-- Required meta tags -->
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no" />
		<!-- Bootstrap css -->
		<link rel="stylesheet" type="text/css" href="./css/bootstrap.css" />
		<link rel="stylesheet" type="text/css" href="./css/index.css" />
		<title></title>
	</head>
	<body>
		<div class="container-fluid">
			<div class="container">
				<div class="row nav-box">
					<!-- 导航左 开始 -->
					<div class="col-md-2 nav-box-left">
						<img src="./img/logo.png" alt="">
					</div>
					<!-- 导航左 结束 -->

					<!-- 导航右 开始 -->
					<div class="col-md-10 na-box-right">
						<ul class="nav justify-content-around">
							<li class="nav-item">
								<a class="nav-link active" href="index.html">首页</a>
							</li>
							<li class="nav-item">
								<a class="nav-link" href="works.html">作品展示</a>
							</li>
							<li class="nav-item">
								<a class="nav-link" href="about.html">关于我们</a>
							</li>
							<li class="nav-item">
								<a class="nav-link" href="news.html">新闻动态</a>
							</li>
							<li class="nav-item">
								<a class="nav-link" href="./concat.html">联系我们</a>
							</li>
						</ul>
					</div>
					<!-- 导航左 结束 -->
				</div>
			</div>
		</div>
		<!-- 轮播图 开始 -->
		<div id="myCarousel" class="carousel slide" data-ride="carousel">
			<!-- 控制点 开始 -->
			<ol class="carousel-indicators">
				<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
				<li data-target="#myCarousel" data-slide-to="1"></li>
			</ol>
			<!-- 控制点 结束 -->
			<!-- 轮播项 -->
			<div class="carousel-inner">
				<div class="carousel-item active">
					<img src="./img/1.jpeg" class="d-block w-100" alt="...">
					<div class="carousel-caption d-none d-md-block">
						<h5>人 + 彩妆 = 美丽</h5>
						<p>打破手残魔咒，给一个机会扮靓自己！</p>
					</div>
				</div>
				<div class="carousel-item">
					<img src="./img/2.jpeg" class="d-block w-100" alt="...">
					<div class="carousel-caption d-none d-md-block">
						<h5>人 + 彩妆 = 美丽</h5>
						<p>打破手残魔咒，给一个机会扮靓自己！</p>
					</div>
				</div>
			</div>
			<!-- 左右控制按钮 开始 -->
			<a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
				<span class="carousel-control-prev-icon" aria-hidden="true"></span>
				<span class="sr-only">Previous</span>
			</a>
			<a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
				<span class="carousel-control-next-icon" aria-hidden="true"></span>
				<span class="sr-only">Next</span>
			</a>
			<!-- 左右控制按钮 结束 -->
		</div>
		<!-- 轮播图 结束 -->

		<div class="container">
			<!-- 产品展示标题 开始 -->
			<div class="row product-titlebox">
				<div class="col-sm-4 col-md-4 product-line">
					<div></div>
				</div>
				<div class="col-sm-4 col-md-4 text-center product-show">
					产品展示<span>show</span>
					<div class="product-description">用一分用心，换一天的美丽和心情</div>
				</div>
				<div class="col-sm-4 col-md-4 product-line">
					<div></div>
				</div>
			</div>
			<!-- 产品展示标题 结束 -->

			<!-- 产品内容 开始 -->
			<div class="row">
				<div class="col-sm-12 col-md-4">
					<div class="card"">
						<img src=" ./img/product/-36680.jpeg" class="card-img-top" alt="...">
						<div class="card-body">
							<h5 class="card-title">Card title</h5>
							<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's
								content.</p>
							<a href="#" class="btn btn-primary">Go somewhere</a>
						</div>
					</div>
				</div>
				<div class="col-sm-12 col-md-4">
					<div class="card"">
						<img src=" ./img/product/-36675.jpeg" class="card-img-top" alt="...">
						<div class="card-body">
							<h5 class="card-title">Card title</h5>
							<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's
								content.</p>
							<a href="#" class="btn btn-primary">Go somewhere</a>
						</div>
					</div>
				</div>
				<div class="col-sm-12 col-md-4">
					<div class="card"">
						<img src=" ./img/product/-36681.jpeg" class="card-img-top" alt="...">
						<div class="card-body">
							<h5 class="card-title">Card title</h5>
							<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's
								content.</p>
							<a href="#" class="btn btn-primary">Go somewhere</a>
						</div>
					</div>
				</div>
				<div class="col-sm-12 col-md-4">
					<div class="card"">
						<img src=" ./img/product/-36682.jpeg" class="card-img-top" alt="...">
						<div class="card-body">
							<h5 class="card-title">Card title</h5>
							<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's
								content.</p>
							<a href="#" class="btn btn-primary">Go somewhere</a>
						</div>
					</div>
				</div>
			</div>
			<!-- 产品内容 结束 -->
			<!-- 作品展示 开始 -->
			<div class="row product-titlebox">
				<div class="col-sm-4 col-md-4 product-line">
					<div></div>
				</div>
				<div class="col-sm-4 col-md-4 text-center product-show">
					作品展示<span>Works</span>
					<div class="product-description">美丽自己创造，创作一场艺术盛宴。</div>
				</div>
				<div class="col-sm-4 col-md-4 product-line">
					<div></div>
				</div>
			</div>
			<div class="row">
				<!-- 轮播图 开始 -->
				<div id="myCarouselWork" class="carousel carousel-fade" data-ride="carousel">
					<!-- 控制点 开始 -->
					<ol class="carousel-indicators">
						<li data-target="#myCarouselWork" data-slide-to="0" class="active"></li>
						<li data-target="#myCarouselWork" data-slide-to="1"></li>
					</ol>
					<!-- 控制点 结束 -->
					<!-- 轮播项 -->
					<div class="carousel-inner">
						<div class="carousel-item active" data-interval="2000">
							<img src="./img/product/-36682.jpeg" class="d-block w-100" alt="...">
							<div class="carousel-caption d-none d-md-block">
								<h5>人 + 彩妆 = 美丽</h5>
								<p>打破手残魔咒，给一个机会扮靓自己！</p>
							</div>
						</div>
						<div class="carousel-item" data-interval="2000">
							<img src="./img/product/-36680.jpeg" class="d-block w-100" alt="...">
							<div class="carousel-caption d-none d-md-block">
								<h5>人 + 彩妆 = 美丽</h5>
								<p>打破手残魔咒，给一个机会扮靓自己！</p>
							</div>
						</div>
					</div>
					<!-- 左右控制按钮 开始 -->
					<a class="carousel-control-prev" href="#myCarouselWork" role="button" data-slide="prev">
						<span class="carousel-control-prev-icon" aria-hidden="true"></span>
						<span class="sr-only">Previous</span>
					</a>
					<a class="carousel-control-next" href="#myCarouselWork" role="button" data-slide="next">
						<span class="carousel-control-next-icon" aria-hidden="true"></span>
						<span class="sr-only">Next</span>
					</a>
					<!-- 左右控制按钮 结束 -->
				</div>
				<!-- 轮播图 结束 -->
			</div>
			<div class="row">
				<div class="col-sm-12 col-md-3">
					<div class="work-box">
						<img src="./img/work/-36676.jpeg" alt="">
						<h6>浓墨重彩的异域风情</h6>
						<p>裸妆步骤完美教程10步骤，让您半小时完成元气少女妆</p>
					</div>
				</div>
				<div class="col-sm-12 col-md-3">
					<div class="work-box">
						<img src="./img/work/-36677.jpeg" alt="">
						<h6>浓墨重彩的异域风情</h6>
						<p>裸妆步骤完美教程10步骤，让您半小时完成元气少女妆</p>
					</div>
				</div>
				<div class="col-sm-12 col-md-3">
					<div class="work-box">
						<img src="./img/work/-36678.jpeg" alt="">
						<h6>浓墨重彩的异域风情</h6>
						<p>裸妆步骤完美教程10步骤，让您半小时完成元气少女妆</p>
					</div>
				</div>
				<div class="col-sm-12 col-md-3">
					<div class="work-box">
						<img src="./img/work/-36679.jpeg" alt="">
						<h6>浓墨重彩的异域风情</h6>
						<p>裸妆步骤完美教程10步骤，让您半小时完成元气少女妆</p>
					</div>
				</div>
			</div>

			<!-- 作品展示 结束 -->

			<!-- 联系我们标题 开始 -->
			<div class="row product-titlebox">
				<div class="col-sm-4 col-md-4 product-line">
					<div></div>
				</div>
				<div class="col-sm-4 col-md-4 text-center product-show">
					联系我们<span>show</span>
					<div class="product-description">尊敬的客户，如果您对我们有任何的意见或建议请联系我们，我们会尽快给您反馈的</div>
				</div>
				<div class="col-sm-4 col-md-4 product-line">
					<div></div>
				</div>
			</div>
			<!-- 联系我们标题 结束 -->

			<div class="row">
				<div class="col-sm-12 col-md-5">
					<form action="">
						<div class="form-group">
							<input type="text" class="form-control" placeholder="留言标题">
						</div>
						<div class="form-group">
							<textarea rows="5" class="form-control">留言内容
							</textarea>
						</div>
						<div class="form-group">
							<input type="email" class="form-control" placeholder="联系邮箱">
						</div>
						<button type="button" class="btn btn-primary float-right">提交</button>
					</form>
				</div>
				<div class="col-sm-12 col-md-3">
					<p>公司：xxx有限公司</p>
					<p>地址：中国北京东城区xx大厦8-88室</p>
					<p>电话：010-88888888</p>
					<p>传真：010-88888888</p>
					<p>邮箱：888888@163.com</p>
				</div>
				<div class="col-sm-12 col-md-4">
					<img src="./img/map.jpg" alt="">
				</div>
			</div>
		</div>
		<div class="footer">
			<ul>
				<li>版权所有：xxx公司&nbsp;&nbsp;&nbsp;&nbsp;</li>
				<li>备案号：京ICP备2020xxx号</li>
			</ul>
		</div>
		<!-- Optional JavaScript -->
		<!-- jQuery first, then Popper.js, then Bootstrap JS -->
		<script src="./js/jQuery341.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="./js/bootstrap.bundle.js" type="text/javascript" charset="utf-8"></script>
	</body>
</html>
